:root {
	--primary-error-tips: '当前无法播放该资源，请检测网络环境或资源地址';
}

* {
	box-sizing: border-box;
	font-family: $font-family-regular;
}

html {
	height: 100%;
}

body {
	font-family: $font-family-regular;
	font-weight: 100;
	height: 100%;
	font-size: 1.6rem; /* 16px */
	line-height: 1.5;
}

#app {
	width: 100%;
	height: 100%;
}

// 滚动条
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	/*滚动条宽度*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 8px;
	/*滚动条的圆角*/
	border: 0;
	background-color: $scrollbar-color;
	/*滚动条的背景颜色*/
}

// 管理端页面整体布局
.manage-layout.search-wrapper {
	background-color: #fff;
	flex-shrink: 0;
	padding: 1.5rem 0;
	border-bottom: 1px solid $border-color-primary;

	.title-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 2rem;
		padding-left: 2rem;
		color: $color_brand;
		font-size: $font-size-large-1;
	}

	.title-wrapper::before {
		position: absolute;
		left: 0;
		top: 50%;
		display: block;
		content: '';
		width: 3px;
		height: $font-size-large-1;
		background-color: $color_brand;
		transform: translateY(-50%);
	}

	.content-wrapper {
		position: relative;
		display: flex;
		padding: 2rem 2rem 0;

		&.justify-between {
			justify-content: space-between;
		}
	}

	.filter-item-wrapper {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex: 1;
		min-width: 0;
		gap: 1rem 0;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding-right: 2rem;

		.item-label {
			display: inline;
			padding-right: 1rem;
			flex-wrap: nowrap;
			text-align: right;
			color: $text-color-regular;
			white-space: nowrap;
		}

		.item-input {
			width: 25rem;

			&.margin-right {
				margin-right: 2rem;
			}
		}

		.el-select,
		.el-cascader {
			width: 22rem;
		}
	}
	.search-btn {
		display: flex;
		align-items: center;
		height: 3.2rem;
		padding: 0 1.5rem;
		background-color: #fff;
		color: $text-color-regular;
		border: 1px solid $border-color-primary;
		border-radius: 0.5rem;
		cursor: pointer;

		&:hover {
			text-decoration: underline;
		}
	}

	.btns-wrapper {
		position: absolute;
		right: 3.2rem;
		top: 2rem;
		display: flex;
		align-items: center;
		gap: 0 1rem;

		&.static {
			position: static;
			height: 3.2rem;
		}

		.btn-item {
			display: flex;
			align-items: center;
			height: 3rem;
			padding: 0 1.5rem;
			background-color: $color_brand;
			color: #fff;
			border-radius: 0.5rem;
			cursor: pointer;
		}
	}

	.config-text {
		font-size: $font-size-base;
		color: $text-color-brand;
		text-decoration: underline;
		text-underline-offset: $text-underline-offset;
		cursor: pointer;
	}

	.el-radio:not(:last-child) {
		margin-right: 1rem;
	}
}
.manage-layout.data-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding: 1.5rem 0;
	background-color: #fff;

	.title-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 2rem;
		padding-left: 2rem;
		color: $color_brand;
		font-size: $font-size-large-1;
	}

	.title-wrapper::before {
		position: absolute;
		left: 0;
		top: 50%;
		display: block;
		content: '';
		width: 3px;
		height: $font-size-large-1;
		background-color: $color_brand;
		transform: translateY(-50%);
	}

	.table-wrapper {
		padding: 0 2rem;
		flex: 1;
		min-height: 0;
		margin-top: 1.5rem;
	}

	.table-btn {
		display: inline-flex;
		align-items: center;
		color: $color_brand;
		margin-left: 0.5rem;
		padding: 0 1rem;
		font-size: $font-size-small-1;
		cursor: pointer;

		&.disabled {
			color: $text-color-disabled;
			cursor: not-allowed;
		}
	}

	.table-btn:first-child {
		margin-left: 0;
	}

	.table-btn:hover {
		text-decoration: underline;
	}
}

// 表格
.self-stripe-table {
	width: 100% !important;

	&.no-background {
		.el-table__body-wrapper .el-table__cell {
			background-color: transparent !important;
		}
	}

	&:not(.no-background) {
		td.el-table__cell {
			border-bottom: none;
		}
	}

	th.el-table__cell {
		background-color: rgba($color-brand, 0.1);
		color: $text-color-primary !important;
		font-size: $font-size-base;
		font-weight: 400;
	}

	.el-table__row--striped td.el-table__cell {
		background-color: $bg-td-2-color;
	}

	td.el-table__cell {
		color: $text-color-regular !important;
		font-size: $font-size-base !important;

		.txt-regular {
			color: $text-color-regular !important;
		}

		.txt-secondary {
			color: $text-color-secondary !important;
		}

		.txt-brand {
			color: $text-color-brand !important;
		}

		.txt-warning {
			color: $text-color-warning !important;
		}

		.txt-danger {
			color: $text-color-danger !important;
		}
	}

	.overflow {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

// 分页
.pagination-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	background-color: #fff;
}

// 图谱节点详情弹框
.node-info-dialog {
	position: fixed;
	top: 9.2rem;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	flex-direction: column;
	width: 39rem;
	padding: 2rem;
	z-index: 9999;
	background: #fdfcff;
	box-shadow: 0px 0px 0.8rem 0px rgba(26, 60, 207, 0.18);
	border-radius: 0.4rem;

	.close-icon {
		position: absolute;
		top: 1rem;
		right: 1rem;
		color: $text-color-regular;
		cursor: pointer;

		&:hover {
			color: $color-brand;
		}
	}

	.node-title {
		display: flex;
		align-items: center;

		.node-type {
			position: relative;
			top: 0.3rem;
			flex-shrink: 0;
			margin-left: 1rem;
			margin-right: 1rem;
			padding: 2px 5px;
			border-radius: 3px;
			font-size: $font-size-small-2;
			background-color: $bg-block-color-brand;
			color: $text-color-secondary;
		}
	}

	.node-text {
		position: relative;
		width: fit-content;
		font-size: $font-size-large-2;
		color: $color_brand;

		&::after {
			position: absolute;
			left: 0;
			right: 0;
			content: '';
			display: block;
			height: 0.2rem;
			background-color: $color-brand;
		}
	}

	.content-wrapper {
		flex: 1;
		min-height: 0;
		overflow: auto;

		.node-text {
			margin-top: 2rem;
		}
	}

	.block-item-wrapper {
		margin-top: 2rem;

		.block-title {
			position: relative;
			font-size: $font-size-base;
			color: $text-color-regular;
			padding-left: 0.8rem;

			&::before {
				position: absolute;
				left: 0;
				top: 50%;
				content: '';
				display: block;
				width: 0.2rem;
				height: $font-size-base;
				background-color: $color-brand;
				transform: translateY(-50%);
			}
		}

		.block-content {
			margin-top: 0.5rem;
			padding: 2rem;
			background-color: $bg-block-color-primary;
			border-radius: 0.4rem;
		}

		.empty-txt {
			margin-top: 0.5rem;
			font-size: $font-size-small-1;
			color: $text-color-regular;
		}
	}

	.footer-wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 5rem;
		border-top: 1px solid $border-color-primary;

		.el-button {
			margin-left: 2rem;
			padding-left: 2rem;
			padding-right: 2rem;
			border-radius: 0.8rem;
			border: 1px solid $color_brand;
			color: $color_brand;

			&:first-child {
				margin-left: 0;
			}
		}
	}
}

// 文字提示
.el-popper.is-customized {
	padding: 6px 12px;
	background: linear-gradient(
		90deg,
		color.adjust($color_brand, $lightness: 5%),
		color.adjust($color_brand, $lightness: 15%)
	);
	color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
	background: linear-gradient(
		45deg,
		color.adjust($color_brand, $lightness: 5%),
		color.adjust($color_brand, $lightness: 15%)
	);
	right: 0;
	color: #fff;
}

.self-search-wrapper {
	position: relative;

	.search-icon {
		position: absolute;
		top: 50%;
		right: 1rem;
		width: $font-size-small-1;
		height: $font-size-small-1;
		transform: translateY(-50%);
		cursor: pointer;
	}
}

.el-input.self-radius {
	.el-input__wrapper {
		width: 20rem;
		border-radius: 1.6rem;
	}
}

// 弹框 设置宽高16:9
.self-dialog {
	padding: 0;

	&:not(.is-align-center) {
		margin-top: 3rem !important;
	}

	.el-dialog__header {
		display: flex;
		align-items: center;
		height: 6rem;
		padding: 0 0 0 2rem;
		background-color: rgba($color_brand, 0.1);

		.el-dialog__title {
			font-size: $font-size-large-2;
			color: $color_brand;
		}
	}

	.el-dialog__headerbtn {
		height: 6rem;

		.el-dialog__close {
			font-size: $font-size-large-5;
			color: $color_brand;
			font-weight: bold;
		}
	}

	.el-dialog__body {
		padding: 2rem;
	}

	.el-dialog__footer {
		padding: 0 2rem 2rem 2rem;
	}
}

/* 播放器相关 */
.xgplayer {
	.xgplayer-drag {
		background-color: $color-brand !important;
	}

	.xgplayer-loading {
		display: none !important;
	}

	.xgplayer-errornote {
		visibility: hidden !important;
	}

	.xgplayer-error::after {
		content: var(--primary-error-tips) !important;
		color: #fff !important;
		position: absolute !important;
		font-size: $font-size-small-1 !important;
	}

	.isCovered .xgplayer-error::after {
		content: '录像文件已被覆盖，请联系管理人员确认' !important;
	}

	.isDelete .xgplayer-error::after {
		content: '录像文件已被删除，请联系管理人员确认' !important;
	}

	.xgplayer-progress-played {
		background: $color-brand !important;
	}

	.xgplayer-progress-btn {
		background-color: rgba($color-brand, 0.5) !important;
	}

	.xg-options-list li:hover,
	.xg-options-list li.selected {
		color: $color-brand !important;
	}
}

.empty-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: $text-color-secondary;
	font-size: $font-size-base;
	white-space: nowrap;
}

// 图谱tab切换样式
.page-tabs-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
	height: 5rem;

	.tab-item {
		padding: 0 1.6rem;
		height: 3.2rem;
		line-height: 3.2rem;
		border-radius: 0.4rem;
		background-color: #ffffff;
		box-shadow: 0px 0px 0.8rem 0px rgba(26, 60, 207, 0.18);
		cursor: pointer;

		&.active {
			color: $color-brand;
		}
	}
}

// 搜索结果弹框
.search-results-popup {
	position: absolute;
	top: calc(100% + 0.8rem);
	right: 0;
	width: 25rem;
	padding: 1.5rem;
	background-color: #fff;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 0.5rem 0px rgba(26, 60, 207, 0.18);
	z-index: 999;

	.search-results-close {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: $font-size-large-2;
		height: $font-size-large-2;
		color: $text-color-secondary;
		cursor: pointer;
		transition: color 0.3s ease;

		&:hover {
			color: $color-brand;
		}

		.el-icon {
			font-size: $font-size-base;
		}
	}

	.search-results-title {
		padding-right: 2rem;
		font-size: $font-size-base;
		color: $text-color-primary;
		line-height: $font-size-large-2;
	}

	.search-results-list {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		max-height: 30rem;
		margin-top: 1.5rem;
		overflow: auto;
	}

	.search-result-item {
		display: flex;
		flex-direction: column;
		padding: 1rem;
		background-color: rgba($color: $bg-block-color-primary, $alpha: 0.7);
		border-radius: 0.4rem;
		gap: 0.5rem;
		cursor: pointer;

		&:hover {
			background-color: color.adjust($color-brand, $lightness: 38%);
		}

		.search-result-tag {
			display: inline-block;
			width: fit-content;
			padding: 0.2rem 0.6rem;
			font-size: $font-size-small-2;
			color: #fff;
			border-radius: 0.3rem;
			white-space: nowrap;
			box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 0, 0, 0.27);

			&.tag-blue {
				background-color: #3c75f7;
			}

			&.tag-green {
				background-color: #4caf50;
			}
		}

		.search-result-title {
			font-size: $font-size-small-1;
			color: $text-color-regular;
		}
	}
}

// 类型筛选框
.type-group-wrapper {
	position: absolute;
	min-width: 23rem;
	padding: 1rem;
	color: $text-color-regular;
	font-size: $font-size-small-1;
	background-color: #fff;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 0.5rem 0px rgba(26, 60, 207, 0.18);

	.type-group-item-wrapper {
		max-height: 50rem;
		overflow: auto;
	}

	.type-group-item {
		margin-bottom: 0.5rem;

		&:last-child {
			margin-bottom: 0;
		}

		.type-group-title {
			padding: 0.5rem 0.8rem;
			color: $text-color-primary;
			font-size: $font-size-base;
			border-radius: 0.4rem;
			cursor: pointer;
			transition: all 0.3s ease;

			&:hover {
				background-color: $bg-block-color-brand;
				color: $color_brand;
			}
		}

		.type-sub-list {
			padding-bottom: 0.5rem;
			border-bottom: 1px solid $border-color-primary;

			.type-sub-item {
				display: flex;
				align-items: center;
				padding: 0.5rem 0.8rem;
				color: $text-color-regular;
				font-size: $font-size-small-1;
				border-radius: 0.4rem;
				cursor: pointer;
				transition: all 0.3s ease;

				&:hover {
					background-color: $bg-block-color-brand;
					color: $color_brand;
				}

				.type-sub-item-icon {
					width: 1.3rem;
					height: 1.3rem;
					margin-right: 0.5rem;
					background: radial-gradient(circle, #94abff 0%, #3c75f7 100%);
					box-shadow: 0px 1px 0.2rem 0px rgba(0, 0, 0, 0.27);
					border-radius: 50%;
				}

				.type-sub-item-text {
					flex: 1;
					min-width: 0;
					white-space: nowrap;
				}
			}
		}
	}

	.type-group-footer {
		margin-top: 1rem;

		.type-group-btn {
			width: 100%;
			height: 3.2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 1.5rem;
			background-color: $color_brand;
			color: #fff;
			border: none;
			border-radius: 0.4rem;
			font-size: $font-size-base;
			cursor: pointer;
			transition: all 0.3s ease;
			white-space: nowrap;

			&:hover {
				background-color: color.adjust($color_brand, $lightness: -5%);
			}
		}
	}
}

// 图谱工具栏
.toolbar-wrapper {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	gap: 1.2rem;

	.grid-btn {
		position: relative;

		&:hover {
			.grid-item-wrapper {
				opacity: 1;
				visibility: visible;
			}
		}

		.grid-item-wrapper {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			bottom: 0;
			left: -12.6rem;
			width: 12rem;
			padding: 1rem 0;
			color: $text-color-regular;
			font-size: $font-size-small-1;
			background-color: #fff;
			border-radius: 0.4rem;
			box-shadow: 0px 0px 0.8rem 0px rgba(26, 60, 207, 0.18);
			transition: opacity 0.3s ease, visibility 0.3s ease;

			&::after {
				content: '';
				position: absolute;
				right: -0.6rem;
				bottom: 1rem;
				width: 0;
				height: 0;
				border-left: 0.6rem solid #fff;
				border-top: 0.6rem solid transparent;
				border-bottom: 0.6rem solid transparent;
			}

			.grid-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0.5rem 0;
				cursor: pointer;
				transition: all 0.3s ease;

				&:hover {
					background-color: $bg-block-color-brand;
					color: $color_brand;
				}
			}
		}
	}

	.center-btn {
		position: relative;
	}

	.el-button {
		padding: 0.8rem;
		width: 3.4rem;
		height: 3.2rem;

		&:hover {
			color: $color_brand;
		}
	}

	.el-icon {
		font-size: $font-size-base;
	}

	.el-input-number {
		.el-input__suffix {
			position: relative;
			left: -4rem;
		}
	}
}
